{% extends 'base/base1.html' %}
{% load static %}

{% block title %}用户详情{% endblock %}

{% block css %}
<style>
    .user-detail {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 30px;
        margin-bottom: 20px;
    }
    
    .user-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .order-item {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
    }
    
    .address-item {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
    }
</style>
{% endblock %}

{% block main %}
<div class="container-fluid">
    <div class="user-detail">
        <div class="row">
            <div class="col-md-3 text-center">
                {% if user_detail.header %}
                    <img src="{{ user_detail.header.url }}" alt="{{ user_detail.username }}" class="user-avatar">
                {% else %}
                    <div class="user-avatar bg-secondary d-flex align-items-center justify-content-center text-white mx-auto" style="font-size: 48px;">
                        {{ user_detail.username|first|upper }}
                    </div>
                {% endif %}
                <h3 class="mt-3">{{ user_detail.username }}</h3>
            </div>
            
            <div class="col-md-9">
                <h4>基本信息</h4>
                <table class="table table-borderless">
                    <tr>
                        <td><strong>用户名：</strong></td>
                        <td>{{ user_detail.username }}</td>
                    </tr>
                    <tr>
                        <td><strong>邮箱：</strong></td>
                        <td>{{ user_detail.email|default:"未设置" }}</td>
                    </tr>
                    <tr>
                        <td><strong>注册时间：</strong></td>
                        <td>{{ user_detail.date_joined|date:"Y-m-d H:i:s" }}</td>
                    </tr>
                    <tr>
                        <td><strong>最后登录：</strong></td>
                        <td>{{ user_detail.last_login|date:"Y-m-d H:i:s"|default:"从未登录" }}</td>
                    </tr>
                    <tr>
                        <td><strong>用户状态：</strong></td>
                        <td>
                            {% if user_detail.is_active %}
                                <span class="badge badge-success">活跃</span>
                            {% else %}
                                <span class="badge badge-danger">已禁用</span>
                            {% endif %}
                            {% if user_detail.is_staff %}
                                <span class="badge badge-warning">管理员</span>
                            {% endif %}
                            {% if user_detail.is_superuser %}
                                <span class="badge badge-danger">超级管理员</span>
                            {% endif %}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        
        <hr>
        
        <div class="row">
            <div class="col-md-6">
                <h4>最近订单</h4>
                {% for order in orders %}
                <div class="order-item">
                    <div class="d-flex justify-content-between">
                        <div>
                            <strong>{{ order.order_number }}</strong>
                            <p class="mb-1">金额：￥{{ order.total_amount }}</p>
                            <small class="text-muted">{{ order.created_at|date:"Y-m-d H:i" }}</small>
                        </div>
                        <div>
                            <span class="badge badge-info">{{ order.get_status_display }}</span>
                        </div>
                    </div>
                </div>
                {% empty %}
                <p class="text-muted">暂无订单</p>
                {% endfor %}
            </div>
            
            <div class="col-md-6">
                <h4>收货地址</h4>
                {% for address in addresses %}
                <div class="address-item">
                    <strong>{{ address.recipient_name }}</strong> {{ address.phone }}
                    <p class="mb-1">{{ address.get_full_address }}</p>
                    {% if address.is_default %}
                        <span class="badge badge-primary">默认地址</span>
                    {% endif %}
                </div>
                {% empty %}
                <p class="text-muted">暂无收货地址</p>
                {% endfor %}
            </div>
        </div>
        
        <div class="mt-4">
            <a href="{% url 'main:user_list' %}" class="btn btn-secondary">返回用户列表</a>
        </div>
    </div>
</div>
{% endblock %}